<template>
  <div class="knowledge-main">
    <div class="list-wrap">
      <div
        class="list--wrap-item clearfix"
        :style="{ borderColor: curLibrary.color }"
      >
        <div class="fl l-img">
          <img :src="knowledgeCoverImg(knowledgeData)" class="fl cover" />
        </div>
        <div class="fl r-txt">
          <p class="line"></p>
          <p class="title one-ellipsis">
            <span>{{ curLibrary.knowledgeName }}名称: </span>
            {{ knowledgeData.name }}
          </p>
          <div class="txt-info">
            <p class="txt-row clearfix" v-if="type == 1">
              <span>
                <span class="row-name">所属章节：</span>
                <span class="row-cont col">
                  <!-- {{
                    knowledgeData.sysKnowledgeChapterList[0].courseChapterName
                  }} -->
                  {{ knowledgeData.chapterFullName }}
                </span>
              </span>
            </p>
            <p class="txt-row">
              <span class="row-name" v-show="type == 1">编写人员：</span>
              <span class="row-name" v-show="type != 1">作者：</span>
              <span class="row-cont col">{{ knowledgeData.author }}</span>
            </p>
            <p class="txt-row" v-if="type == 2 || type == 3">
              <span class="row-name">作者单位：</span>
              <span class="row-cont col">{{ showUnitName }}</span>
            </p>
            <Score
              v-if="knowledgeData.id"
              :resId="knowledgeData.id"
              :resType="2"
              :showBtn="true"
            />
          </div>
          <div class="txt-score clearfix">
            <ConcernedLog txtShow :type="2" :resId="knowledgeData.id" />
          </div>
        </div>
        <div class="directory">
          <el-dropdown trigger="hover">
            <el-button
              type="primary"
              :style="{
                backgroundColor: curLibrary.color,
                borderColor: curLibrary.color,
              }"
            >
              <span>{{ curLibrary.name }}目录</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="KnowledgeTop">
              <ChapterList v-if="type == 1" />
              <ClassifyList v-if="type != 1" />
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { LIBRARY } from '@/utils/config.js'
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  components: {
    ConcernedLog: () => import('@/components/home/concernedLog.vue'),
    Score: () => import('@/components/home/score.vue'),
    ChapterList: () => import('../courseDetail/ChapterList.vue'),
    ClassifyList: () =>
      import('../../courseLibrary/courseDetail/ClassifyList.vue'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      curLibrary: {},
    }
  },
  props: ['knowledgeData'],
  computed: {
    showUnitName() {
      let { sourceUnitName } = this.knowledgeData
      let name = ''
      if (sourceUnitName) {
        let arr = sourceUnitName.split('/')
        name = arr[arr.length - 2]
      }

      return name
    },
  },
  mounted() {
    this.curLibrary = LIBRARY.filter((v) => v.type == this.type)[0]
  },
  methods: {},
}
</script>
<style scoped lang="scss" >
.knowledge-main {
  background: #fff;
  width: 100%;
  margin-top: 40px;
  .list-wrap {
    margin: 0 auto;
    .list--wrap-item {
      position: relative;
      height: 200px;
      padding: 20px 0;
      border-bottom: 5px solid #06a2c9;
      margin-bottom: 20px;
      position: relative;
      .l-img {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 300px;
        height: 200px;
        border: 1px solid #eee;
        box-sizing: border-box;
        .cover {
          width: 100%;
          height: 100%;
          display: inherit;
        }
      }
      .r-txt {
        position: relative;
        width: 100%;
        padding-left: 350px;
        box-sizing: border-box;
        .line {
          position: absolute;
          width: 4px;
          height: 80px;
          left: 15px;
          top: 0;
          background: #c71615;
          display: none;
        }
        .title {
          border-bottom: 1px solid #d8d5d5;
          padding-bottom: 15px;
          color: var(--colorH1);
          font-size: 20px;
          font-weight: 900;
        }
        .col {
          color: #666;
        }
        .txt-info {
          margin-top: 10px;
          .txt-row {
            font-size: 16px;
            width: 100%;
            position: relative;
            .row-name {
              font-weight: 900;
              line-height: 38px;
              padding-left: 1em;
            }
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 16px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: var(--colorH1);
            }
            .row-cont {
              width: 90%;
            }
            .four-ellipsis {
              height: 100px;
              line-height: 24px;
            }
          }
        }
      }
      .directory {
        position: absolute;
        right: 0;
        bottom: 20px;
        .el-button--primary {
          color: #fff;
          background-color: #06a2c9;
          border-color: #06a2c9;
        }
      }
    }
  }
}
ul.el-dropdown-menu.el-popper.KnowledgeTop {
  width: 270px;
  padding: 0;
}
</style>